<template>
  <div class="app">
    <van-notice-bar left-icon=" volume-o" color="#1989fa" background="#f5f5f5"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
    <img class="logo" src="//s.yezgea02.com/1606836859539/onpeice.png" alt="" />
    <van-divider>卡密到期后,使用新的卡密不会读取以前的配置文件</van-divider>
    <van-divider>请悉知</van-divider>

    <div class="container" style="padding-left: 10px;padding-right: 10px;">
      <van-form @submit="onSubmit" class="rounded-border">
        <span
          style="display: flex;align-content: center;justify-content: center;
          margin-top: -15px;color:cornflowerblue;font-weight: bold;font-size: 25px">安全出行
          -
          平安回家</span>
        <img class="logo2" src="@/assets/icons/login.svg" alt="" />
        <div class="form">
          <van-field v-model="keyNumber" type="password" label="卡密:"
            :rules="[{ required: true, message: '请填写购买的卡密' }]" />
            <van-field v-model="account" type="account" label="账号:"
            :rules="[{ required: true, message: '微信号或手机号' }]" />
        </div>

        <div style="margin: 16px 0">
          <van-button icon="manager" block type="info" native-type="submit">
            登录
          </van-button>
        </div>
        <div style="display: flex;">
          <van-checkbox name="1" shape="square" v-model="radio" />
          <van-tag plain type="primary" style="left: 5px;">安全登录</van-tag>
        </div>

        <span
          style="display: flex;align-content: center;justify-content: right;margin-top: 10px;
          color: cornflowerblue;font-weight: bold;font-size: 15px;">V1.0</span>
      </van-form>
    </div>
  </div>
</template>

<script>
import { request } from "../network/requst";
import { Dialog } from "vant";

export default {
  data() {
    return {
      keyNumber: undefined,
      account:undefined,
      radio: true,
      jkurl: ''
    };
  },
  created() {
    this.jkurl = 'http://localhost:9999'
  },
  methods: {
    
    onSubmit(values) {
      if(localStorage.getItem("token") == undefined || localStorage.getItem("token") == ""){
        // 空的话初始化一个伪token
        localStorage.setItem("token","")
      }else{
        // 否则取出token
        localStorage.setItem("token",localStorage.getItem("token"))
        
      }
      request({
        url: "/account/login",
        params: { keyNumber: this.keyNumber,account:this.account },
      }).then((res) => {
        if (res.data.code == 200) {
          Dialog.alert({
            title: "消息提示",
            message: res.data.message,
            theme: "round-button",
          });
          localStorage.setItem("token", res.data.data);
          this.$router.push({
            path: "home",
            query: { account: this.keyNumber },
          });
        }
        if (res.data.code != 200) {
          Dialog.alert({
            title: "消息提示",
            message: res.data.message,
            theme: "round-button",
          });
          return;
        }
      });
    },
  },
};
</script>


<style scoped>
.logo {
  width: 250px;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
}

.logo2 {
  width: 50px;
  display: block;
  align-content: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 30px;
}

.rounded-border {
  background-color: #ffffff;
  /* 背景颜色 */
  border-radius: 20px;
  /* 圆角大小 */
  padding: 50px;
  /* 内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.app {
  background-color: #f0f0f0;
  /* 您想要的背景颜色 */
  height: 100%;
  /* 确保背景色填充整个页面 */
  width: 100%;
  position: fixed;
  /* 使div的大小与视窗大小一致 */
}
</style>